<script>
  export default {
    // 单/多行省略组件
    name: 'PEllipsis',
    props: {
      // 最多展示多少行
      lines: {
        type: Number,
        default: 1
      }
    },
    methods: {},
    render() {
      const { lines } = this.$props
      let text = ''
      // 处理没有default插槽时的特殊情况
      if (this.$slots.default) {
        text = this.$slots.default.map(vNode => vNode.text).join('')
      }
      // 判断是否显示多行
      if (lines > 1) {
        return (
          <a-tooltip>
            <div slot="title">{text}</div>
            <div class="multiple-line" style={{ '--lines': this.lines }}>{text}</div>
          </a-tooltip>
        )
      } else {
        return (
          <a-tooltip>
            <div slot="title">{text}</div>
            <div class="ellipsis-line">{text}</div>
          </a-tooltip>
        )
      }
    }
  }
</script>
<style lang="less" scoped>
  .ellipsis-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multiple-line {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
  }
</style>
